<template>
  <el-drawer
    size="40%"
    v-model="dialogVisibled"
    :before-close="handleClose"
    :title="dialogTitle"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <el-divider />
    <div class="divStyle">
      <div style="display: flex">
        <el-icon style="color: orange; font-size: 45px"><Warning /></el-icon>
        <div style="text-align: left; margin-left: 10px">
          <div style="color: orange">演示版不能操作用户【张三】。</div>
        </div>
      </div>
      <el-tree
        class="treeStyle"
        :data="userList"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        show-checkbox
        :check-strictly="true"
        ref="bindUserTree"
        width="100%"
        node-key="key"
        :props="defaultProps"
      >
        <template #default="{ node, data }">
          <div class="custom-node">
            <el-icon color="#67C23A"
              ><component class="icons" :is="data.icon"></component
            ></el-icon>
            <span>&nbsp;{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </div>
    <template #footer>
      <div style="position: relative; top: 10px">
        <el-button
          icon="Close"
          size="large"
          type="danger"
          plain
          @click="handleClose"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="large"
          icon="Check"
          plain
          @click="getCheckedValues"
          >保存</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>
    <script  lang="ts">
import {
  ref,
  onMounted,
  defineComponent,
  PropType,
  computed,
  reactive,
} from "vue";
import { ElMessage } from "element-plus";
import { SysRole } from "@/model/role/role";
import { treeExtendOutPut } from "@/model/public/treeModel";
import { RoleUserInput } from "@/model/public/public";
import { BindRoleUser } from "@/api/role";
import { nodeTypeEnum } from "@/enum/public";
import buttonStyleLayout from "@/components/buttonStyle.vue";
import { GetBindUser, GetCorporationUser } from "@/api/user";
export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
    },
    dialogTitle: { type: String },
    modelData: {
      type: Object as PropType<SysRole>,
      required: true,
    },
  },

  setup(props, context) {
    //用户数据
    const userList = ref<treeExtendOutPut[]>([]);
    //角色树
    const bindUserTree = ref();
    //角色和用户关系
    const userRoleInput = reactive<RoleUserInput>({
      roleId: 0,
      userId: [],
    });

    //tree指定操作
    const defaultProps = {
      children: "children",
      label: "label",
      //设置复选框不能勾选
      disabled(data: treeExtendOutPut) {
        if (data.disabled) {
          return true;
        }
      },
      class(data: treeExtendOutPut) {
        if (data.nodeType !== nodeTypeEnum.user) {
          return "role-button-style"; //设置复选框不显示
        }
      },
    };

    //初始加载dom
    onMounted(() => {
      //getSystemSelectMsg();
      //getRoleTreeMsg();
    });

    //打开时加载
    const handleDialogOpen = function () {
      getCorporationUserMsg(props.modelData.CorporationKey);
      GetBindUserMsg();
    };

    //获取公司下用户数据
    const getCorporationUserMsg = function (corporationKey: string) {
      if (corporationKey === "" || corporationKey === undefined) {
        ElMessage({
          message: "公司不能为空",
          type: "warning",
        });
        return;
      }
      GetCorporationUser({
        corporationKey,
      }).then(({ data, code, msg }) => {
        if (code == 200) {
          userList.value = data;
        }
      });
    };

    //获取角色绑定用户
    const GetBindUserMsg = function () {
      GetBindUser({
        roleId: props.modelData.RoleId,
      }).then(({ data, code, msg }) => {
        if (code == 200) {
          bindUserTree.value!.setCheckedKeys(data);
        }
      });
    };

    //获取tree选中节点
    const getCheckedValues = () => {
      //获取全选状态值，true 只获取全选中的值
      const checkedNodes = bindUserTree.value.getCheckedKeys(true);
      userRoleInput.roleId = props.modelData.RoleId;
      userRoleInput.userId = checkedNodes;
      BindRoleUser(userRoleInput).then(({ data, code, msg }) => {
        if (code == 200) {
          // useUserStore().loadMenus(); //刷新菜单
          handleClose();
          ElMessage({
            message: msg,
            type: "success",
          });
        }
      });
    };

    //是否显示dialog
    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });

    //关闭事件
    const handleClose = () => {
      context.emit("closeBnt");
    };

    return {
      handleClose,
      dialogVisibled,
      handleDialogOpen,
      userList,
      getCheckedValues,
      bindUserTree,
      defaultProps,
      nodeTypeEnum,
    };
  },
  components: { buttonStyleLayout },
});
</script>
        
        <style scoped>
.divStyle {
  margin: 10px;
}

.treeStyle {
  margin: 10px;
  max-height: 650px;
  overflow-y: auto;
}
</style>